<template>
  <div class="container">
    <headerNav title="公告详情" />
    <!-- Header section with title and date -->
    <div class="header">
      <div class="title">未来 iPad 将搭载 90Hz 高刷屏幕，为用户带来更流畅的视觉体验</div>
    </div>
    <div class="date">发布日期：2024年11月6日</div>

    <!-- Content section -->
    <div class="content">
      <p>苹果公司计划在未来推出支持90Hz刷新率的iPad屏幕。新的技术将带来更加流畅的使用体验，同时也会在耗电和亮度方面进行优化。</p>
      <p>根据业内人士的分析，90Hz刷新率有望成为未来iPad标准配置，为用户提供更流畅的观看效果。</p>
    </div>

    <!-- Image section with gray block as placeholder -->
    <div class="image-container">
      <div class="gray-block">
        <van-image class="gray-block" radius="8px" cover src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      </div>
      <p class="caption">图片来源：苹果公司</p>
    </div>

    <div class="content">
      <p>此外，iOS 18.2 也会带来更多的电池管理功能。新功能将帮助用户更好地监控和管理电池使用。</p>
    </div>

    <!-- Interactive section (sharing options with gray icon) -->
    <div class="interactive">
      <div class="share">
        <div class="gray-icon">
          <van-icon class="gray-icon" name="wechat" />
        </div>
        <span style="font-size: 12px;">分享到微信</span>
      </div>
    </div>

    <!-- Comment section with gray avatar placeholders -->
    <div class="comments">
      <h3>评论</h3>
      <div class="comment">
        <div class="avatar"></div>
        <div class="comment-body">
          <div class="comment-author">用户1</div>
          <div class="comment-content">这真是一个好消息！期待新iPad的高刷体验。</div>
        </div>
      </div>
      <div class="comment">
        <div class="avatar"></div>
        <div class="comment-body">
          <div class="comment-author">用户2</div>
          <div class="comment-content">希望价格不会太高啊，不然又要破费了。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import headerNav from '@/components/layout/headerNav.vue'
</script>

<style>
.container {
  max-width: 680px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Header section with long title support */
.header {
  margin-bottom: 15px;
  margin-top: 80px;
}

.header .title {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  word-wrap: break-word;
}

.date {
  font-size: 28px;
  color: #888;
  margin-top: 5px;
}

/* Content section */
.content {
  line-height: 1.8;
  font-size: 36px;
  color: #444;
}

.content p {
  margin-bottom: 20px;
}

/* Gray block as image placeholder */
.image-container {
  margin: 20px 0;
}

.image-container .gray-block {
  width: 100%;
  height: 300px;
  background-color: #e5e7eb;
  border-radius: 10px;
}

.caption {
  font-size: 24px;
  color: #666;
  text-align: center;
  margin-top: 5px;
}

/* Interactive section */
.interactive {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.interactive .share {
  display: flex;
  align-items: center;
}

.interactive .share .gray-icon {
  width: 28px;
  height: 24px;
  background-color: #ddd;
  border-radius: 4px;
  margin-right: 8px;
}

.interactive .share span {
  color: #555;
  font-size: 24px;
}

/* Comment section */
.comments {
  margin-top: 25px;
}

.comments .comment {
  display: flex;
  margin-bottom: 20px;
}

.comments .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ddd;
  margin-right: 15px;
}

.comments .comment-body {
  flex: 1;
}

.comment-body .comment-author {
  font-weight: bold;
  color: #333;
  font-size: 24px;
  margin-bottom: 5px;
}

.comment-body .comment-content {
  color: #555;
  font-size: 22px;
}

/* Button styling */
.back-btn {
  display: inline-block;
  color: #1e90ff;
  font-size: 14px;
  margin-top: 10px;
  text-decoration: none;
}
</style>